<style lang="scss" scoped>
  .van-tabbar-item__text{
    font-size: 1.3rem !important;
  }
</style>
<template>
  <van-tabbar
    v-model="active"
    :active-color="activeColor"
    :inactive-color="inactiveColor"
    title-class="fs-14"
    @change="tabChange"
  >
    <van-tabbar-item
      v-for="item in tabbar"
      :key="item.id"
      :icon="active === item.id ? item.activeIcon : item.inactiveIcon"
      >{{ item.text }}</van-tabbar-item
    >
    <!-- <van-tabbar-item v-for="item in tabbar" :key="item.id">
      <span>{{item.text}}</span>
      <template #icon="props">
        <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
      </template>
    </van-tabbar-item> -->
  </van-tabbar>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
  components: {
   [Tabbar.name]: Tabbar,
   [TabbarItem.name]: TabbarItem,
  },
  data() {
    return {
      active: 0,
      activeColor: "#FF0000",
      inactiveColor: "#999",
      tabbar:[{
        id:0,
        activeIcon: "gift",
        inactiveIcon: "gift-o",
        text: "活动案例"
      },{
        id:1,
        activeIcon: "send-gift",
        inactiveIcon: "send-gift-o",
        text: "活动管理"
      },{
        id:2,
        activeIcon: "friends",
        inactiveIcon: "friends-o",
        text: "活动粉丝"
      },{
        id:3,
        activeIcon: "manager",
        inactiveIcon: "manager-o",
        text: "个人中心"
      }]
    }
  },
  mounted () {
    const _this = this;
    const mainColor = _this.$store.getters.getMainColor;
    const tabbar = _this.$store.getters.getTabbar;
    if(mainColor){
      _this.activeColor = mainColor;
      console.log("===========activeColor==============", _this.activeColor)
    }else{
      //调用接口获取mainColor
    }
    if(tabbar.length > 0){
      _this.tabbar = tabbar;
      console.log("===========tabbar==============", _this.tabbar)
    }else{
      //调用接口获取tabbar
      // _this.getTabbar()
    }

    this.initActive();
  },
  methods: {
    getCode (appid) { // 非静默授权，第一次有弹框
      const code = this.getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
      const local = window.location.href
      console.log("======code====",code)
      console.log("======local====",local)
      if (code == null || code === '') {
        window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+ appid +'&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
      } else {
        //this.getOpenId(code) //把code传给后台获取用户信息
        this.code=code;
      }
    },
    getUrlParam: function (name) {
      var reg=new RegExp('(^|&)'+name+'=([^&]*)(&|$)')
      var r=window.location.search.substr(1).match(reg)
      if(r!=null) return unescape(r[2])
      return null
    },
    
    initActive() {
      const _this = this;
      //初始化active
      let params = window.location.hash;
      let hash = params.substr(2);
      switch(hash) {
        case 'case':
            _this.active = 0;
            break;
        case 'manage':
            _this.active = 1;
            break;
        case 'fans':
            _this.active = 2;
            break;
        case 'my':
            _this.active = 3;
            break;
        default:
            _this.active = 0;
      }
    },
    tabChange(key) {
      const _this = this;
      document.title = _this.tabbar[key].text
      switch (key) {
        case 0:
          _this.$router.push('/case');
          break;
        case 1:
          _this.$router.push('/manage');
           break;
        case 2:
          _this.$router.push('/fans');
           break;
        case 3:
          _this.$router.push('/my');
           break;
        default:
          break;
      }
    }
  }
};
</script>
